


Fire Emblem Support Scripting: Edits

by Clover_Zero



Category: No Fandom
Genre: CSS, Fanwork Research & Reference Guides, HTML, Other, Work Skin
Language: English
Status: Completed
Published: 2020-05-24
Updated: 2020-06-01
Packaged: 2021-03-03 10:22:08
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 1,069
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/24349453
Author URL: https://archiveofourown.org/users/Clover_Zero/pseuds/Clover_Zero
Summary: Based on gadaursan's"Fire Emblem Support Scripting"work skin, a formatting and CSS to format screenplay and scripts (or dialogue-only/dialogue-heavy stories), but now with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble.
Comments: 8
Kudos: 9
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works, HTML & CSS stuffs





	1. (Faulty) Version 1

**Author's Note:**

  * Inspired by [Repository](https://archiveofourown.org/works/8631214) by [gadaursan](https://archiveofourown.org/users/gadaursan/pseuds/gadaursan). 



> **PLEASE TURN ON "SHOW CREATOR'S STYLE", otherwise it won't work.**
> 
> Skin credit goes to gadaursan. Thank you so much for making it, such a simple, yet genius idea to use tables! I only edited a few things to suit my own preferences.  
> Although title says "Fire Emblem", it can be used for any fandoms, of course.

** UPDATE 31 MAY 2020 **

Although this example looks nice, it actually has faults I just belatedly realized. These faults are listed below and **are fixed in version 2 (see chapter 2).**

**EXAMPLE**

| 

I've waited. For a long time, perhaps much like you. I've waited for things to turn back to normal again, but that time never came.  
  
---|---  
| 

I don't know what you're wishing for, but I'm sure you will get what you want someday.  
  
| 

… F-Forget all the nonsense I just said.  
  
| (Takumi quickly leaves, and shuts the door behind him.)  
| 

… Why should I...?  
  
**MY EDITS**

  * Adjusted the images, it can now become smaller in smaller screens.
  * Added a text box/speech bubble on the dialogues. It looks like a chat template now, but less like chat messaging app (for me, at least).



**DOWNSIDES/PROBLEMS**

**Initial problems:**

  * The icons become way too small in smaller screens, but this in turns make room for more text. I still don't know how to fix this yet. **(FIXED IN VERSION 2)**
  * ~~In desktop/bigger screens, the speech bubble is LONG, even when the sentences are short. I still haven't found a way for the speech bubble to follow the text's length and fixing the width to something else will create another problem I have no idea how to solve yet.~~ **FIXED!**
  * The tail of the speech bubble is clearly not a border, unlike the rest of the speech bubble itself. It's hard to make the border works, so this is all I can do for now. To mitigate the weirdness, you can just put a background color in the speech bubble.



**31 May 2020 findings:**

I found these problems when I was _finally_ editing my fanfic using this skin. I apologize for being late to realize their existence. I'm really, really sorry. To put it simply, I found that the second column (henceforth called dialogues) squish on the icons, thus making two problems if the requirements are met:

  * Icons are too large if the dialogues are short.
  * Icons are too small if the dialogues are too long.



It's better if you see it for yourself.

For the first problem, let's delete the longest dialogue by deleting the second sentence:

| 

I've waited. For a long time, perhaps much like you.  
  
---|---  
| 

I don't know what you're wishing for, but I'm sure you will get what you want someday.  
  
See how the icons are suddenly enlarged? That's because, to put it simply, the long text is what keeps the icons at bay, squishing it to be smaller. If the text are way longer (second problem), the icons will shrink to an ugly degree even in desktop:

| 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus, felis porttitor ullamcorper vestibulum, neque nunc faucibus odio, vel viverra leo nisi vitae mauris. Nam mattis est vitae tellus interdum faucibus nec vel metus. Nullam a ante suscipit, pellentesque leo id, rhoncus nunc. Fusce at sapien consectetur nunc sodales mattis pulvinar eu quam.  
  
---|---  
  
**Why didn't the example show this problem?** Because it got the sweet, perfect length for the longest dialogue, I'd say. If that makes sense. I hope it makes sense.

To mitigate these problems, I have to find a way to stop the dialogue on squishing the icons somehow OR put a fixed width on the icons (like the original script). However, I'm greedy. I want a certain kind of responsiveness from the icons.

Thankfully, I managed to fix these problems. Onto chapter 2.


	2. Version 2

I'll be using an excerpt of my [fanfic](https://archiveofourown.org/works/23342197) as an example this time, just because.

**EXAMPLE**

| 

My friend, what are your plans for today?  
  
---|---  
| 

Sleeping after work as always, of course. Why did you ask?  
  
| 

Did you forget? Today is a month after Valentine's Day.  
  
| 

Oh...White Day, huh? I completely forgot about it.  
  
I had to edit the codes for this to work within the faulty skin and thankfully it seems to work. Try resizing your browser if you're on desktop, the icons shrink, but not too small. Looks far better, isn't it?

**WHAT ABOUT THE PROBLEMS?**

From the example above, it's clear that the icons don't get bigger with short dialogues. Let's see if the dialogue is long:

| 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus, felis porttitor ullamcorper vestibulum, neque nunc faucibus odio, vel viverra leo nisi vitae mauris. Nam mattis est vitae tellus interdum faucibus nec vel metus. Nullam a ante suscipit, pellentesque leo id, rhoncus nunc. Fusce at sapien consectetur nunc sodales mattis pulvinar eu quam.  
  
---|---  
  
The icon doesn't shrink at all! It works!

**MY EDITS**

Yesterday, I actually tried things and found out that it's case by case basis, which means it's really dependent on how short or long the dialogue is in the fanfic, and one must set limitations for it to work. But of course, that is far from ideal as a skin - as a template to be used in various works. I didn't give up and tried things again today...and voila, here is it! The skin is almost perfect now.

I honestly have no idea how and why adding certain codes work (which I listed in my document), but whatever, as long as it works now! (Laughs)

Hopefully there's no more hidden problems. I tested it with various dialogues this time.

**DOWNSIDES**

  * (Still) The tail of the speech bubble is clearly not a border, unlike the rest of the speech bubble itself. It's hard to make the border works, so this is all I can do for now. To mitigate the weirdness, you can just put a background color in the speech bubble.
  * ~~The description (stage direction) looks a bit awkward, especially on smaller screens. For now, the way to mitigate this is to close the table, put a **p** (paragraph) below it, then start another table instead of making it as **td** (table data)~~. **(FIXED)**



**MY WISHLIST**

  * Fix the downsides above (especially speech bubble).
  * Make it possible to add the character's name above or below the icon but with everything looks good somehow.



**USAGE**

  * I recommend having the original images/icons of all characters in the same size and aspect ratio.
  * It's okay for the icons to be larger than what I set in the CSS (128px) because it'll be automatically get resized to 128px. My icons are 300x300 px.
  * Please read [this page](https://archiveofourown.org/faq/tutorial-creating-a-work-skin?language_id=en) for the basics of Work Skins.
  * Please visit [this page](https://www.notion.so/Fire-Emblem-Support-Script-Edit-5ee8c61e729b4da990686bab7133263b) for the codes and notes regarding them.



**Author's Note:**

> Feel free to ask me questions or even give suggestions to me through comments or twitter @harem_eater. Thank you!


End file.
